<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="翻译平台、翻译网站、找翻译、找人翻译、法语翻译、英语翻译、日语翻译、德语翻译、意大利语翻译、俄罗斯语、翻译人员、成都翻译、成都翻译员" />
<meta name="description" content="众译，助推翻译事业，选择最佳翻译人员，最迅速、最便捷的网络翻译平台。" />
<title>众译-可信赖的翻译平台-个人中心</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/css.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/global.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/config.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/citydata.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/AjaxAction.js"></script>

<script type="text/javascript">
	var context = '<%=request.getContextPath()%>';
	
	var v_ga = '<s:property value="%{#session.SESSION_USER.goodAt}"/>';
	
	$(function (){
		initProvince("province", '<s:property value="%{#session.SESSION_USER.provice}"/>');
		changeCity('province', 'city', '<s:property value="%{#session.SESSION_USER.city}"/>');
		//init_v_ga_text();
		$('.cls_c').text(getCityDesc($('.cls_p').text(), $('.cls_c').text()));
		$('.cls_p').text(getProvinceDesc($('.cls_p').text()));
		$(".editbtn").bind('click', editHandler);
		$(".savebtn").bind('click', saveHandler);
		$(".cancelbtn").bind('click', cancelHandler);
	});
	
	function init_v_ga_text() {
		var gas = v_ga.split(',');
		if (gas.length > 0) {
			var txt = new Array();
			for (var i = 0 ; i < gas.length ; i++) {
				txt.push('<label>'+getTypeDesc(gas[i])+'</label>');
			}
			$("#goodAtType").html(txt.join(''));
		}
	}
	
	// 编辑
	function editHandler() {
		toggleClass(true);
	}
	
	// 保存
	function saveHandler() {
		// 检测手机和翻译经验
		var phone = $(":text[name='dump.cellPhone']").val();
		var exp = $(":text[name='dump.experience']").val();
		if (!phone.isEmpty() && !phone.isCellPhone()) {
			$("#div_message").text('请输入正确的手机号码,如:13800138000');
			return;
		} 
		if (!exp.isEmpty() && !exp.isNumber()) {
			$("#div_message").text('请输入正确的翻译经验,如:3');
			return;
		}
		AjaxAction.executeWithHTML(context + '/passport/', 'update_detail_execute', $('#edit_form').serialize(), saveSuccessCallback, saveErrorCallback);
		$(".savebtn").unbind('click');
		$("#div_loading").show();
	}
	
	// 保存执行结果成功
	function saveSuccessCallback(data, status) {
		var result = $(data).find("msg").text();
		if ('success' == result || 'success' == status) {
			//dump.realName=&dump.cellPhone=&dump.alipay=&dump.im=&dump.provice=0&dump.city=0&dump.experience=0&dump.college=;
			$("#rn_display").text($(":text[name='dump.realName']").val());
			$("#cp_display").text($(":text[name='dump.cellPhone']").val());
			$("#ap_display").text($(":text[name='dump.alipay']").val());
			$("#im_display").text($(":text[name='dump.im']").val());
			var l_p = $("#province").val();
			if (l_p != '0') {
				$(".cls_p").text($("#province > option[value='"+l_p+"']").text());
			}
			var l_c = $("#city").val();
			if (l_c != '0') {
				$(".cls_c").text($("#city > option[value='"+l_c+"']").text());
			}
			$("#exp_display").text($(":text[name='dump.experience']").val());
			$("#coll_display").text($(":text[name='dump.college']").val());
			
			toggleClass(false);
		} else {
			$("#div_message").text('保存个人信息出错,请稍后再试.');
		} 
		$("#div_loading").hide();
		$(".savebtn").bind('click', saveHandler);
	}
	
	// 保存执行错误
	function saveErrorCallback(){
		$("#div_message").text('请输入正确的个人信息');
		$("#div_loading").hide();
		$(".savebtn").bind('click', saveHandler);
	}
	
	// 取消
	function cancelHandler() {
		toggleClass(false);
	}
	
	// 状态切换
	// @param s_edit 是否是编辑状态
	function toggleClass(s_edit) {
		if (s_edit) {
			$(".table_data").hide();
			$("#div_edit_btn").hide();
			$("#div_con_btn").show();
			$("#edit_table").show();
		} else {
			$(".table_data").show();
			$("#div_edit_btn").show();
			$("#div_con_btn").hide();
			$("#edit_table").hide();
		}
	}
</script>
</head>
<body>
<div class="layout">
<jsp:include page="/include/head/top.jsp"/>
<jsp:include page="/include/head/top_nav.jsp"/>
<div class="content">
<jsp:include page="left.jsp" >
	<jsp:param value="2" name="parent"/>
	<jsp:param value="6" name="child"/>
</jsp:include>
<div class="col_r">
<s:if test="%{!#session.SESSION_USER.isDetailComplete()}">
	<div class="tip t">
	    <p>请完善您的个人资料以便让更多的需求者找到您。</p>
	</div>
</s:if>
<div class="steps">
<div class="step_part" id="tab1">
<h1><a class="current" href="javascript:void(0)">个人信息</a></h1>
</div>
<div class="col_left">
<div id="box1">
<div class="box block">
	<table class="table_data">
		<tr id="email_display">
			<td align="right">电子邮件：</td>
			<td><span id="current_email"><s:property value="%{#session.SESSION_USER.email}"/></span></td>
			<td>&nbsp;</td>
		</tr>
		<tr>
		    <td align="right">昵称：</td>
		    <td><s:property value="%{#session.SESSION_USER.nikeName}"/></td>
		    <td></td>
	 	</tr>
		<tr>
		    <td align="right">翻译等级：</td>
		    <td><div class="ph stars_<s:property value="%{#session.SESSION_USER.averagePoint}"/>" title="评级:<s:property value="%{#session.SESSION_USER.averagePoint}"/>"></div></td>
		    <td>&nbsp;</td>
		</tr>
		<tr>
		    <td align="right">真实姓名：</td>
		    <td id="rn_display"><s:property value="%{#session.SESSION_USER.realName}"/></td>
		    <td></td>
		  </tr>
		<tr>
		    <td align="right">手机号码：</td>
		    <td id="cp_display"><s:property value="%{#session.SESSION_USER.cellPhone}"/></td>
		    <td></td>
		</tr>
		<tr>
		    <td align="right">支付宝账号：</td>
		    <td id="ap_display"><s:property value="%{#session.SESSION_USER.alipay}"/></td>
		    <td></td>
		</tr>
		<tr>
		    <td align="right">IM：</td>
		    <td id="im_display"><s:property value="%{#session.SESSION_USER.im}"/></td>
		    <td></td>
		</tr>
		<tr>
		    <td align="right">所属地区：</td>
		    <td><span class="cls_p"><s:property value="%{#session.SESSION_USER.provice}"/></span> - <span class="cls_c"><s:property value="%{#session.SESSION_USER.city}"/></span></td>
		    <td></td>
		</tr>
		    <tr>
		    <td align="right">资质证书：</td>
		    <td></td>
		    <td></td>
		</tr>
		<tr>
		    <td align="right">翻译经验：</td>
		    <td id="exp_display"><s:property value="%{#session.SESSION_USER.experience}"/>年</td>
		    <td></td>
		</tr>
		<tr>
		    <td align="right">毕业院校：</td>
		    <td id="coll_display"><s:property value="%{#session.SESSION_USER.college}"/></td>
		    <td></td>
		</tr>
	</table>
	<%--编辑 --%>
	<form action="" enctype="application/x-www-form-urlencoded" id="edit_form" method="post">
		<table class="table_data" id="edit_table" style="display: none;">
			<tr id="email_display">
				<td align="right">电子邮件：</td>
				<td><span id="current_email"><s:property value="%{#session.SESSION_USER.email}"/></span></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
			    <td align="right">昵称：</td>
			    <td><s:property value="%{#session.SESSION_USER.nikeName}"/></td>
			    <td></td>
		 	</tr>
			<tr>
			    <td align="right">翻译等级：</td>
			    <td><div class="ph stars_<s:property value="%{#session.SESSION_USER.averagePoint}"/>" title="评级:<s:property value="%{#session.SESSION_USER.averagePoint}"/>"></div></td>
			    <td>&nbsp;</td>
			</tr>
			<tr>
			    <td align="right">真实姓名：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.realName}"/>" name="dump.realName"/></td>
			    <td></td>
			  </tr>
			<tr>
			    <td align="right">手机号码：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.cellPhone}"/>" name="dump.cellPhone"/></td>
			    <td></td>
			</tr>
			<tr>
			    <td align="right">支付宝账号：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.alipay}"/>" name="dump.alipay"/></td>
			    <td></td>
			</tr>
			<tr>
			    <td align="right">IM：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.im}"/>" name="dump.im"/></td>
			    <td></td>
			</tr>
			<tr>
			    <td align="right">所属地区：</td>
			    <td>
			     	<select name="dump.provice" id="province" onchange="changeCity('province', 'city');">
						<option>四川省</option>
					</select>
				    <select name="dump.city" id="city">
						<option>成都</option>
					</select>
				</td>
			    <td></td>
			</tr>
			<tr>
			    <td align="right">翻译经验：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.experience}"/>" name="dump.experience"/>年</td>
			    <td></td>
			</tr>
			<tr>
			    <td align="right">毕业院校：</td>
			    <td><input type="text" value="<s:property value="%{#session.SESSION_USER.college}"/>" name="dump.college"/></td>
			    <td></td>
			</tr>
		</table>
	</form>
	<div class="button_center" id="div_edit_btn">
		<input type="button" class="editbtn" value=""/>
	</div>
	<div class="button_center" id="div_con_btn" style="display: none;">
		<input type="button" class="savebtn" value=""/>&nbsp;&nbsp;&nbsp;<input type="button" class="cancelbtn" value="取消"/>
		<div class="button_center" id="div_loading" style="display: none;">
			<img src="<%=request.getContextPath() %>/images/loading.gif" alt="loading" /><span>正在保存数据,请稍等...</span>
		</div>
		<div class="button_center" id="div_message"></div>
	</div>
</div>
<div class="box none">News Box</div>
<div class="box none">Article Box</div>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/include/foot/foot.jsp" />
</div>
</body>
</html>
